<template>
  <!-- 增改角色弹框 -->
  <hcDialog
    dialogWidth="600px"
    :dialogTitle="
      options.type === 'add'
        ? $t('system.dictionary.newParam')
        : $t('system.dictionary.editParam')
    "
    customClass="hymson-dialog dict-dialog"
    :isVisable="options.show"
    :isFooter="true"
    @closeDialog="closeFun"
    @save="saveDialog(formRef)"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="160px"
      class="add-role-ruleForm"
      status-icon
    >
      <el-form-item :label="$t('system.dictionary.paramType')">
        <div class="param-type" :title="paramType">{{ paramType }}</div>
      </el-form-item>
      <el-form-item :label="$t('system.dictionary.paramKey')" prop="dictLabel">
        <el-input
          v-model="form.dictLabel"
          :placeholder="$t('system.dictionary.paramKeyInfo')"
        />
      </el-form-item>
      <el-form-item
        :label="$t('system.dictionary.paramValue')"
        prop="dictValue"
      >
        <el-input
          v-model="form.dictValue"
          :placeholder="$t('system.dictionary.paramValueInfo')"
        />
      </el-form-item>
      <el-form-item :label="$t('system.dictionary.paramValueRemark')">
        <el-input
          v-model="form.remark"
          :placeholder="$t('system.dictionary.paramRemarkInfo')"
        />
      </el-form-item>
    </el-form>
  </hcDialog>
</template>

<script setup name="DictDialog">
import { reactive, ref, toRefs, watch } from "vue";
import { useI18n } from "vue-i18n";

const { t: $t } = useI18n();
const emit = defineEmits(["onSure", "onCancel"]);

const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        show: false,
        type: "add", // 用于判断是编辑还是删除 add edit
        curRole: null, // 当前编辑的角色
      };
    },
  },
  paramType: {
    type: String,
    default: "",
  },
});

const rules = {
  dictLabel: [
    {
      required: true,
      message: $t("system.dictionary.paramKeyInfo"),
      trigger: "blur",
    },
  ],
  dictValue: [
    {
      required: true,
      message: $t("system.dictionary.paramValueInfo"),
      trigger: "blur",
    },
  ],
};

const formRef = ref();

const data = reactive({
  form: {
    dictLabel: "", // 参数key
    dictValue: "", // 参数值
    dictType: "", //参数类型
    remark: "",
  },
});

watch(
  () => props.options,
  (val) => {
    const curRole = JSON.parse(JSON.stringify(val.curRole));
    for (let key in curRole) {
      if (Object.keys(data.form).includes(key)) {
        data.form[key] = curRole[key];
      }
    }
  },
  { deep: true, immediate: true }
);

// 添加、修改角色
const saveDialog = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      emit("onSure", {
        form: JSON.parse(JSON.stringify(data.form)),
        type: props.options.type,
        id: props.options.curRole?.id, // 用于编辑的id
      });
      closeFun();
    }
  });
};

// 关闭弹框
const closeFun = () => {
  formRef.value.resetFields();
  data.form = {
    dictLabel: "", // 参数key
    dictValue: "", // 参数值
    dictType: "", //参数类型
    remark: "",
  };
  emit("onCancel");
};

const { form } = toRefs(data);
</script>

<style lang="scss" scoped>
.param-type {
  width: 300px;
  height: 28px;
  line-height: 28px;
  // background: #000000;
  padding: 0 8px;
  // color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
